<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin" style="min-width: 60vw">
      <q-card-section>
        <div class="text-h6">MOCK表达式常用示例</div>
        <div class="q-pt-none text-grey-6 row no-wrap justify-between">
          <span>注：规则如：1-3，+1等 更多见<a href="https://lavyun.github.io/better-mock/document/syntax-specification.html#%E6%95%B0%E6%8D%AE%E6%A8%A1%E6%9D%BF%E5%AE%9A%E4%B9%89%E8%A7%84%E8%8C%83-dtd" target="_blank">Mock语法规范</a></span>
          <span class="q-pr-md">更多示例请参考<a href="https://lavyun.github.io/better-mock/document/random/basic.html" target="_blank">Mock官网</a></span>
        </div>
      </q-card-section>

      <q-card-section class="q-pt-none mockTable">
        <q-markup-table class="text-h6" separator="cell" flat bordered wrap-cells>
          <thead>
            <tr>
              <th>表达式</th>
              <th>举例及说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>@boolean</td>
              <td>false/true</td>
            </tr>
            <tr>
              <td>@date、@time、@datetime</td>
              <td>@datetime("yyyy-MM-dd A HH:mm:ss")、@date("y-MM-dd")</td>
            </tr>
            <tr>
              <td>@guid、@id</td>
              <td>随机ID"F057aD78-2220-1F36-cb6b-0DD5F2eaD4CA"，"810000201912274998"</td>
            </tr>
            <tr>
              <td>@pick(["a", "e", "i", "o", "u"])</td>
              <td>随机选取任意一个</td>
            </tr>
            <tr>
              <td>@dataImage(200x200, '测试图片')</td>
              <td>生成一个图片地址,如果填写 @img，那么图片默认就是600x400</td>
            </tr>
            <tr>
              <td>@province、@city、@county</td>
              <td>依次为："江苏省"、"宜春市"、"远安县"</td>
            </tr>
            <tr>
              <td>@zip</td>
              <td>随机邮政编码 200100</td>
            </tr>
            <tr>
              <td>@ip</td>
              <td>"41.196.214.118"</td>
            </tr>
            <tr>
              <td>@email</td>
              <td>"f.dejbyqrur@lntwkvql.tp"</td>
            </tr>
            <tr>
              <td>@url</td>
              <td>"telnet://nxvlzyeody.bj/pptixhsq"、"ftp://knwv.cc/mneubhk"</td>
            </tr>
            <tr>
              <td>@cname</td>
              <td>"吕娟"、"汤娟"、"雷秀兰"</td>
            </tr>
            <tr>
              <td>@ctitle(3, 5)</td>
              <td>随机指定字数内的标题文本</td>
            </tr>
            <tr>
              <td>@cword("零一二三四五六七八九十", 5, 7)、@cword()、@cword("零一二三四五六七八九十")</td>
              <td>"三一六七八一"、"而"、"六"</td>
            </tr>
            <tr>
              <td>@csentence(3, 5)</td>
              <td>"矿它自九节。"</td>
            </tr>
            <tr>
              <td>@cparagraph()</td>
              <td>"装传布向力己或华则府济只情斗自联规。比关为中光子照马叫听变国律。决最民连量事广位性满别形后头维书组。"</td>
            </tr>
            <tr>
              <td>@color、@hex、@rgb、@rgba、@hsl</td>
              <td>"#8379f2"、"#f28779"、"rgb(121, 242, 161)"、"rgba(186, 242, 121, 0.82)"、"hsl(257, 82, 71)"</td>
            </tr>
            <tr>
              <td>@natural、@integer、@integer(60, 100)、@float(60, 100, 3, 5)</td>
              <td>12、5827034672939047、84、82.8255</td>
            </tr>
          </tbody>
        </q-markup-table>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from 'quasar'

const { dialogRef, onDialogHide } = useDialogPluginComponent()
</script>

<style scoped lang="scss">
.mockTable {
  tr:nth-child(2n),
  thead {
    background-color: #f8f8f8;
  }

  th {
    font-weight: 600;
    font-size: 1rem;
  }

  tr td {
    font-size: 0.93rem;
  }
}
</style>
